<template>
  <header>
    <div class="wrapper">
      <TextBox v-for="(item, index) in textBoxes" :key="index" :text="item.text" :top="item.top" :left="item.left"
        :scale="item.scale" :opacity="item.opacity" :backgroundImage="item.backgroundImage" />
    </div>
  </header>
</template>

<script setup>
import TextBox from './components/TextBox.vue'
import { ref } from 'vue'

const textBoxes = ref([
  { text: '课程名称', top: 200, left: 150, scale: 1.5, opacity: 0.2, backgroundImage: null },
  { text: '课程名称', top: 230, left: 100, scale: 1.5, opacity: 1, backgroundImage: null },
  { text: '课程名称', top: 250, left: 300, scale: 1.2, opacity: 0.9, backgroundImage: null },
  { text: '课程名称', top: 300, left: 200, scale: 1.4, opacity: 0.8, backgroundImage: null },
  { text: '课程名称', top: 400, left: 400, scale: 1.1, opacity: 0.7, backgroundImage: null },
  { text: '课程名称', top: 450, left: 150, scale: 1.3, opacity: 0.6, backgroundImage: null },
  { text: '课程名称', top: 150, left: 350, scale: 0.9, opacity: 0.5, backgroundImage: null },
  { text: '课程名称', top: 350, left: 100, scale: 1.6, opacity: 0.7, backgroundImage: null },
  { text: '课程名称', top: 500, left: 250, scale: 1, opacity: 0.8, backgroundImage: null },
  // 更多文本框...
])

Promise.all(textBoxes.value.map((item) => import('@/assets/ming.JPG').then((module) => (item.backgroundImage = module.default))))
</script>


<style scoped>
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}
</style>
